<template>
	<view>
		<view class="majska">
			<view class="">
				<u-datetime-picker :show="show" v-model="value1" :minDate="1587524800000" :maxDate="1786778555000"
					@confirm="tishok" mode="year-month" @cancel="show = false"></u-datetime-picker>
				<view style="font-size: 16px; font-weight: 600;" @click="show = true"> {{this.times?this.times:this.yearMonth}} ∨</view>
			</view>
			<view style="color: #c1c1c1; font-size: 16px;">
				共计20笔/共计5096元
			</view>
		</view>
		<view class="" v-for="(v,i) in 3">
			<view class="majska" style="background-color: #fff;" >
				<view>
					<view style="font-size: 16px;font-weight: 600;">
						支付
					</view>
					<view style="color: #c1c1c1; font-size: 14px;margin-top: 10px;">
						2024年3月16日13:16:41
					</view>
				</view>
				<view style="font-size: 16px;font-weight: 600;">
					100元
				</view>
			</view>
			<view style="background-color: #f6f6f6;height: 1px;width: 100%;"> </view>
		</view>
	</view>
</template>

<script>
	export default ({
		name: "bill",
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				times: '',
				yearMonth: ''
			}
		},
		onLoad() {
			this.getCurrentYearMonth()
		},
		methods: {
			tishok(value, type) {
				this.show = false
				const date = new Date(value.value);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				this.times = year + '年' + month + '月'
				console.log(this.times)
			},
			getCurrentYearMonth() {
				const currentDate = new Date(); // 获取当前日期  
				const year = currentDate.getFullYear(); // 获取年份  
				const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
				this.yearMonth = `${year}年${month}月`; // 拼接成"YYYY-MM"的形式  
			}
		}
	})
</script>

<style lang="scss" scoped>
	page {
		background-color: #f6f6f6;
	}
	
	.majska{
		display: flex;
		padding: 20px 20px;
		align-items: center;
		    justify-content: space-between;
	}
	
	
</style>